<template>
  <div class="login">
    <div class="logo_res">
      <div class="bian">
        <div class="name_header">
          <div>平台管理</div>
        </div>
        <Form :model="formLabelAlign" label-position="top" class="form_">
          <FormItem label="账号:" >
            <Input type="text" v-model="formLabelAlign.name" placeholder='请输入账号' class=" inp"
                   @keyup.enter.native="adminlogin"></Input>
          </FormItem>
          <FormItem label="密码:" class="inp_">
            <Input type="password" v-model="formLabelAlign.region" placeholder='请输入密码' class="inp"
                   @keyup.enter.native="adminlogin"></Input>
          </FormItem>
          <div class="login_ang inp_">
            <Button type="primary" class="log_in" @click="adminlogintwo">登陆</Button>
          </div>
        </Form>
      </div>
    </div>


  </div>
</template>
<script>
  import bg from '~/ecshop-bg.png'

  export default {
    name: 'login',
    components: {},
    data() {
      return {
        theme2: 'light',
        form: {
          phone: '',
          region: '',
          name: ''
        },
        formLabelWidth: '120px',
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '',
        },
        activeIndex2: '1',
      }
    },
    methods: {
      adminlogintwo() {
        this.ajaxretin()
      },
      adminlogin(ev) {
        if (ev.keyCode == 13) {
          this.ajaxretin()
        }
      },
      ajaxretin() {
        if (this.formLabelAlign.name == "" || this.formLabelAlign.region == "") {
          this.$notify({
            title: '警告',
            message: '账号或者密码没填写完整',
            type: 'warning'
          });
          return false;
        }
        this.http.post({
          'api': 'login',
          'data': {
            "type": 2,  //1管理员  2商户
            "name": this.formLabelAlign.name,
            "password": this.formLabelAlign.region,
          }
        }).then((res) => {
          if (res.data.Response.code == 200) {
            this.$store.commit('SetUserInfo',res.data.Response.data);
            this.$h.SetStorage('asstoken', res.data.Response.data.refresh_token);
            this.http.setHeader(res.data.Response.data.refresh_token);
            this.$h.addCookie('userinfo', res.data.Response.data,0);

            this.$router.push({
              path: '/qrcode'
            })
          }
        }, (err) => {
          if (err.request.response.Response.code == 500) {
            this.$Notice.error({
              title: '登陆失败',
              desc: err.request.response.Response.data
            });
          }
        })
      },
    },
    watch: {},
    computed: {
      //计算属性
    },
    mounted() {
      //生命周期
      document.body.style.background = `url(${bg})`;
      document.body.style.backgroundSize = 'cover';

    }
  }
</script>
<style scoped>
  .name_header {
    width: 100%;
    height: 60px;
  }
  .login {
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, .13);*/
  }
  .name_header div {
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #2d8cf0;
    font-size: 22px;
  }


  .logo_res{
    width: calc(100% - 100px);
    min-width: 840px;
    height: 452px;
    margin: 100px auto;
    border-radius: 3px;
    line-height: 1;
    /*background:url("../../assets/back2.jpg");*/
    /*box-shadow: 2px 2px 56px rgba(0, 0, 0, .13);*/
  }

  .Header_ {
    width: 100%;
  }

  .bian {
    position: relative;
    bottom: 20px;
    margin-left: 60%;
    background: white;
    width: 403px;
    height: 491px;
    box-shadow: 2px 2px 56px rgba(0, 0, 0, .13);
    padding-left: 60px;
  }
.form_{
  margin-top: 80px;
}
  .inp_{
    margin-top: 37px;
  }
  .inp {
    width:85%;
  }

  .login_ang {
    width: 85%;
    height: 50px;
  }

  .log_in {
    width: 100%;
  }

  .heig {
    height: 30%;
  }
</style>
